<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="fa fa-bars"></i> 推广管理</el-breadcrumb-item>
                <el-breadcrumb-item>消息管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <Blockquote>
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addMessage">新建消息</el-button>
            </Blockquote>
        </div>
        <div class="container">
            <el-table :data="tableData"  Checkbox border style="width: 100%" fit ref="multipleTable" :default-sort="{prop:'sortNum',order:'Ascending'}">
            
                <el-table-column prop="id"  label="id" width="80">
                </el-table-column>
                <el-table-column prop="content"  label="消息内容" width="730">
                </el-table-column>
                <el-table-column prop="createDate"  label="创建时间" width="300">
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <a  href="javascript:;" @click="notifyMessage(scope.$index, scope.row)"> <i class="el-icon-edit-outline"></i>推送 </a>
                        <a  href="javascript:;" @click="handleDelete(scope.$index, scope.row)"> <i class="el-icon-delete"></i>删除 </a>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="messagePage.pageNumber" :page-sizes="[10,20, 30, 40]" :page-size="messagePage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="messagePage.totalRow">
			</el-pagination>
            <el-dialog title="编辑消息" :visible.sync="dialogVisible" width="500px">
                <el-form :model="message" label-width="80px" ref="form">
                    <el-form-item label="消息内容" prop="content"  :rules="[
                                      { required: true, message: '请输入消息', trigger: 'blur' }
                                      ]">
                        <el-input v-model="message.content"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveForm('form')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import pictureview from '@/components/my-components/pictureview/index';
    export default {
        data() {
            return {
                lanmu:{},
                tableData:[],
                message:{},
                messageList:[],
                messagePage: {
					pageNumber: 1,
					pageSize: 10
				},
                dialogVisible:false
            }
        },
        methods: {
            init:function () {
                this.lanmu.id=this.$route.query.lanmuId
                this.getData()
            },
            getData() {
                this.$axios.get(this.HOST+'/message/getMessagePage',
                    {
                        params:{
                            "pageNum": this.messagePage.pageNumber,
					    	"pageSize": this.messagePage.pageSize,
                            "lanmuId":this.lanmu.id
                            }
                    }
                ).then((res) => {
                    this.tableData = res.data.data.list;
					this.messagePage = res.data.data;
                })
            },
            handleCurrentChange(pageNum) {
				console.log(pageNum)
				this.$set(this.messagePage, "pageNumber", pageNum)
				this.getData()
			},
           handleSizeChange(pageSize) {
				this.$set(this.messagePage, "pageSize", pageSize)
				this.getData()
			},
            notifyMessage(index,row){
                if(row!=null){
                        this.dialogVisible=false
                        this.$axios({
                            method:"post",
                            url: this.HOST+"/message/notifyMessage",
                            data: {id: row.id,content:row.content}
                        }).then((res)=>{
                            if(res.data.code==200) {
                                if(this.message.id==null){
                                    this.message.id=res.data.data.id;
                                }
                                this.$message.success('推送成功');
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                },
        
           
            saveForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible=false
                        this.$axios({
                            method:"post",
                            url: this.HOST+"/message/saveMessage",
                            data: this.message
                        }).then((res)=>{
                            if(res.data.code==200) {
                                if(this.message.id==null){
                                    this.message.id=res.data.data.id;
                                }
                                this.$message.success('保存成功');
                            }else{
                                this.$message.error(res.data.msg);
                            }
                            this.getData();
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addMessage(index,row){
                if(row!=null){
                    row.message=""
                    this.message=row
                }else{
                    this.ad={}
                }
                this.dialogVisible=true

            },
            handleDelete(index,row){
                this.$axios.get(this.HOST+'/message/delMessage',
                    {
                        params:{id: row.id}
                    }
                ).then((res) => {
                    if(res.data.code==200) {
                        let tableData=this.tableData;
                        for(var o in tableData){
                            if(tableData[o].id==row.id){
                                this.tableData.splice(o,1)
                            }
                        }
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.getData()
                })
            }
        },
        created:function(){
            this.init();
        },

        
        computed: {

        },
        components:{
            'pictureview':pictureview
        }
    }

</script>

<style>

</style>

